/*
 * @Author: your name
 * @Date: 2021-07-13 09:59:12
 * @LastEditTime: 2021-08-04 15:10:48
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \MF-workflow\.rnext\library\components\icon\Icon.tsx
 */
import React, { memo, useMemo } from 'react';
import styles from './icon.module.scss';
import classnames from 'classnames';
import iconMap from './iconMap';

interface IProps {
  icon: string;
  theme?: 'warning' | 'success';
  onClick?: () => void;
  className?: string;
  style?: React.CSSProperties;
}

export default memo(({ icon, onClick, className, theme, style }: IProps) => {
  const handleIcon = useMemo(() => iconMap[icon] || icon, [icon]);

  return (
    <span
      style={style}
      className={classnames(styles.icon, {
        [className || '']: !!className,
        [styles.success]: theme && theme === 'success',
        [styles.warning]: theme && theme === 'warning',
        [styles.cursor]: !!onClick,
      })}
      onClick={onClick}
    >
      {handleIcon}
    </span>
  );
});
